<template>
  <div class="w-80% flex mx-auto" v-loading="loading">
    <div class="charts-wrapper">
      <h3>供应类型占比</h3>
      <PieCharts
        title="供应类型占比"
        width="100%"
        height="300px"
        :chartsData="supplyData"
      />
    </div>
    <div class="charts-wrapper">
      <h3>申请类型占比</h3>
      <PieCharts
        title="申请类型占比"
        width="100%"
        height="300px"
        :chartsData="applyData"
      />
    </div>
  </div>
</template>

<script setup>
import { useLoading } from "@/hooks";

const { loading, setLoading } = useLoading();
const $api = inject("$api");

const supplyData = ref([]);
const applyData = ref([]);

const getStatisticsData = async () => {
  setLoading(true);
  try {
    const [{ data: supplyResData }, { data: applyResData }] = await Promise.all(
      [
        $api.company.getSupplyTypeRadioPieData(),
        $api.company.getApplyTypeRadioPieData(),
      ]
    );

    supplyData.value = supplyResData.map((i) => ({
      name: i.label,
      value: i.value,
    }));
    applyData.value = applyResData.map((i) => ({
      name: i.label,
      value: i.value,
    }));
  } finally {
    setLoading(false);
  }
};

onMounted(() => {
  getStatisticsData();
});
</script>

<style lang="less" scoped>
.charts-wrapper {
  padding-top: 20px;
  flex: 1;
  height: 300px;
  background: #fff;
  box-shadow: 1px 0 10px 3px rgba(0, 0, 0, 0.2);
  &:first-child {
    margin-right: 20px;
  }
  h3 {
    text-align: center;
  }
}
</style>
